<template>
  <div class="setting-root">
    <van-nav-bar
      title="币种交易设置"
      left-arrow
      @click-left="$router.goBack()"
    />
    <van-form @submit="onSubmit">
      <div class="row flex-btw">
        <div class="title-box flex">
          <img src="@/assets/images/setting/1.png" alt="" />
          <div class="title">首单额度</div>
        </div>

        <div class="num-box flex">
          <div class="num">
            <van-field name="first_amount" v-model="first_amount" />
          </div>
          <div class="unit">USDT</div>
        </div>
      </div>

      <div class="row flex">
        <div style="width: 100%;">
          <div class="flex-btw">
            <div class="title-box flex">
              <img src="@/assets/images/setting/2.png" alt="" />
              <div class="title">是否开启开仓加倍</div>
            </div>
            <div class="num-box flex">
              <van-switch
                name="is_first_double"
                v-model="is_first_double"
                active-color="#2D7AFE"
                inactive-color="#DEDEDE"
              />
            </div>
          </div>
        </div>
      </div>
			<div class="row flex">
        <div style="width: 100%;">
          <div class="flex-btw">
            <div class="title-box flex">
              <img src="@/assets/images/setting/2.png" alt="" />
              <div class="title">是否开启卖出保留下次首单</div>
            </div>
            <div class="num-box flex">
              <van-switch
                name="trade_rule"
                v-model="trade_rule"
                active-color="#2D7AFE"
                inactive-color="#DEDEDE"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-btw">
        <div class="title-box flex">
          <img src="@/assets/images/setting/4.png" alt="" />
          <div class="title">做单数量</div>
        </div>
        <div class="num-box flex">
          <div class="num">
            <van-field name="num" v-model="num" readonly />
          </div>
          <div class="unit">单</div>
        </div>
      </div>
      <div class="row flex-btw">
        <div class="title-box flex">
          <img src="@/assets/images/setting/5.png" alt="" />
          <div class="title">止盈比例</div>
        </div>
        <div class="num-box flex">
          <div class="num">
            <van-field name="stop_profit_ratio" v-model="stop_profit_ratio" />
          </div>
          <div class="unit">%</div>
        </div>
      </div>
      <div class="row flex-btw">
        <div class="title-box flex">
          <img src="@/assets/images/setting/6.png" alt="" />
          <div class="title">止盈回调</div>
        </div>
        <div class="num-box flex">
          <div class="num">
            <van-field
              name="stop_profit_callback"
              v-model="stop_profit_callback"
            />
          </div>
          <div class="unit">%</div>
        </div>
      </div>

      <div class="row flex-btw" @click="show = true">
        <div class="title-box flex">
          <img src="@/assets/images/setting/7.png" alt="" />
          <div class="title">补仓跌幅</div>
        </div>

        <div class="num-box flex">
          <div class="num">已设置</div>
          <div class="unit">
            <img src="@/assets/images/setting/9.png" alt="" />
          </div>
        </div>
      </div>

      <div class="row flex-btw">
        <div class="title-box flex">
          <img src="@/assets/images/setting/8.png" alt="" />
          <div class="title">补仓回调</div>
        </div>

        <div class="num-box flex">
          <div class="num">
            <van-field name="cover_callback" v-model="cover_callback" />
          </div>
          <div class="unit">%</div>
        </div>
      </div>
      <div class="btn-box">
        <van-button round type="info" native-type="submit" class="btn"
          >保存</van-button
        >
        <!-- <div class="btn">启动</div> -->
      </div>

      <!-- 弹框 -->
      <van-action-sheet v-model="show">
        <div class="content">
          <div class="header flex-btw">
            <div class="text">补仓跌幅</div>
            <div class="close" @click="show = false">取消</div>
          </div>
          <div
            class="line flex-btw"
            v-for="(item, index) in overlap"
            :key="index"
          >
            <div class="second">
              {{ index === 0 ? "首" : "第" + item.frequency }}次补仓
            </div>

            <div class="num-box flex">
              <div class="num">
                <van-field v-model="item.overlap" />
              </div>
              <div class="unit">%</div>
            </div>
          </div>
          <div class="btn" @click="show = false">确定</div>
        </div>
      </van-action-sheet>
    </van-form>
  </div>
</template>

<script>
import mixin from "@/mixin.js";
import { Toast } from "vant";
import { RULE_BIND, TRADE_DETAIL } from "@/api/api.js";
export default {
  name: "setting",
  mixins: [mixin],
  data() {
    return {
			//是否开启卖出下次保留首单
			trade_rule: true,
      checked: true,
      show: false,
      value: 0,
      //首单额度
      first_amount: 10,
      is_first_double: true,
      num: 7,
      stop_profit_ratio: 1.3,
      stop_profit_callback: 0.3,
      cover_callback: 0.3,
      is_open: 2,
      callback: [],
      // 弹窗列表
      overlap: [
        {
          frequency: 1,
          overlap: 2,
        },
        {
          frequency: 2,
          overlap: 3,
        },
        {
          frequency: 3,
          overlap: 4,
        },
        {
          frequency: 4,
          overlap: 5,
        },
        {
          frequency: 5,
          overlap: 6,
        },
        {
          frequency: 6,
          overlap: 7,
        },
        {
          frequency: 7,
          overlap: 8,
        },
      ],
      detail: [],
    };
  },
  mounted() {
    //console.log(this.$router);
    console.log(this.$router.history.current.params.ids);
    let ids = this.$router.history.current.params.ids;
    if (JSON.stringify(ids).indexOf(",") == -1) {
      console.log("没有逗号");
      this.getDetail(ids);
      // JSON.stringify(detail)
    } else {
      console.log("有逗号");
    }
  },
  methods: {
    async getDetail(id) {
      const { data } = await this.$reqGet(TRADE_DETAIL + "?id=" + id, {});
      if (data.status == 1) {
        //如果是设置过过取上次设置的值 否则取默认参数
        if (data.data.id) {
          this.detail = data.data;
          console.log(data.data);
          this.first_amount = this.detail.first_amount;
          this.is_first_double = this.detail.is_first_double;
          this.num = this.detail.num;
          this.stop_profit_ratio = this.detail.stop_profit_ratio;
          this.stop_profit_callback = this.detail.stop_profit_callback;
          this.cover_callback = this.detail.cover_callback;
          this.overlap = this.detail.overlap_arr;
					this.is_open = this.detail.is_open;
					this.trade_rule = this.detail.trade_rule==1?false:true;
        }
      }
    },
    onSubmit(values) {
      this.callback = [];
      this.overlap.forEach((item) => {
        if (item.frequency <= this.num) {
          this.callback.push(item.overlap);
        }
      });
      values.callback = this.callback.join(",");
      values.coin_id = this.$router.history.current.params.ids;
      values.is_first_double = this.is_first_double ? 1 : 2;
      values.is_open = this.is_open;
			values.trade_rule = this.trade_rule?3:1;
      console.log(this.callback.join(","));
      // console.log(this.show);
			console.log(this.detail);
      console.log(values);
      this.ruleBind(values);
    },
    async ruleBind(values) {
      const { data } = await this.$reqPost(RULE_BIND, values);
      Toast(data.info);
      if (data.status == 1) {
        this.$router.push({ name: "trade" });
      }
    },

    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
  },
  // watch: {
  // 	overlap() {
  // 	  //console.log(value)
  // 	},
  // }
};
</script>

<style lang="scss" scoped>
.setting-root {
  font-size: 0.3rem;

  .row {
    padding: 0 0.3rem;
    border-bottom: 0.04rem solid #faf9f9;
    height: 1rem;
    color: #141414;

    .title-box {
      .title {
      }

      img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.23rem;
      }
    }

    .num-box {
      .num {
        // margin-right: 0.5rem;
      }

      .unit {
        width: 1.1rem;
        text-align: right;
        img {
          width: 0.3rem;
          height: 0.2rem;
        }
      }
    }

    .tips {
      margin-top: 0.3rem;
      img {
        width: 0.28rem;
        height: 0.28rem;
        margin-left: 0.14rem;
        margin-right: 0.24rem;
      }

      .text {
        font-size: 0.2rem;
        color: #2d7afe;
      }
    }
  }

  .btn-box {
    margin: 0.5rem auto 0;
    width: 5.06rem;
    // height: 0.8rem;
    // background-color: #2d7afe;
    // line-height: 0.8rem;
    text-align: center;
    // color: #fff;
    // border-radius: 0.08rem;
    /deep/ button {
      width: 100%;
    }
  }

  .content {
    .header {
      border-bottom: 0.04rem solid #faf9f9;
      padding: 0.3rem;

      .text {
        font-size: 0.34rem;
      }
      .close {
        color: rgb(155, 155, 155);
      }
    }

    .line {
      padding: 0 0.3rem;
      height: 0.8rem;
      border-bottom: 0.01rem solid #faf9f9;
      .unit {
        width: 0.8rem;
        text-align: right;
      }
    }

    .btn {
      width: 100%;
      height: 0.8rem;
      background-color: #2d7afe;
      text-align: center;
      line-height: 0.8rem;
      color: #fff;
    }
  }

  .pd {
    // padding: 0.8rem 0.3rem;
    height: 1.6rem;
  }
}
</style>
